<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="套餐名称" prop="name" >
        <el-input
          v-model="queryParams.name"
          placeholder="请输入套餐名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="套餐的价钱" prop="money" label-width="100px">
        <el-input
          v-model="queryParams.money"
          placeholder="请输入套餐的价钱"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker clearable
                        v-model="queryParams.startTime"
                        type="datetime"
                        value-format="yyyy-MM-dd hh:mm:ss"
                        placeholder="请选择开始时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker clearable
                        v-model="queryParams.endTime"
                        type="datetime"
                        value-format="yyyy-MM-dd hh:mm:ss"
                        placeholder="请选择结束时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="请选择状态" prop="status" label-width="100px">
        <el-select v-model="queryParams.status" placeholder="请选择状态">
          <el-option label="上架" :value="0"></el-option>
          <el-option label="下架" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['admin:manage:grant:thali']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['admin:manage:thali:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['admin:manage:grant:delThail']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['admin:manage:thali:export']"
        >导出
        </el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="manageList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="序号" align="center" prop="id"></el-table-column>
      <el-table-column label="套餐名称" align="center" prop="name"></el-table-column>
      <el-table-column label="封面路径" align="center" prop="image" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.image" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="上下架状态" align="center" prop="status">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 0 ? '上架' : '' }}</span>
          <span>{{ scope.row.status == 1 ? '下架' : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="优惠券的类型 " align="center" prop="type">
        <template slot-scope="scope">
          <span>{{ scope.row.type == 1 ? '打折' : '' }}</span>
          <span>{{ scope.row.type == 2 ? '满减' : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="套餐的价钱" align="center" prop="money"></el-table-column>
      <el-table-column label="开始时间" align="center" prop="startTime" width="180">
        <template slot-scope="scope">
          <span> {{ scope.row.startTime == null ? '' : scope.row.startTime | format('yyyy-MM-dd hh:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endTime" width="180">
        <template slot-scope="scope">
          <span> {{ scope.row.endTime == null ? '' : scope.row.endTime | format('yyyy-MM-dd hh:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="购买须知" align="center" prop="notice"></el-table-column>
      <el-table-column label="最高省多少" align="center" prop="maxMoney"></el-table-column>
      <el-table-column label="优惠券个数" align="center" prop="couponNum"></el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span> {{ scope.row.createTime == null ? '' : scope.row.createTime | format('yyyy-MM-dd hh:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
        <template slot-scope="scope">
          <span> {{ scope.row.updateTime == null ? '' : scope.row.updateTime | format('yyyy-MM-dd hh:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['admin:manage:thali:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['admin:manage:grant:delThail']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改优惠券模块-套餐对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px"  append-to-body>
      <el-scrollbar style="height: 600px;">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" >
        <el-form-item label="套餐名称" prop="name" >
          <el-input v-model="form.name" style="width: 350px" placeholder="请输入套餐名称"/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">上架</el-radio>
            <el-radio :label="1">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="优惠券类型" prop="status">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">打折</el-radio>
            <el-radio :label="2">满减</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="封面路径" prop="image">
          <image-upload v-model="form.image" limit="1"></image-upload>
        </el-form-item>
        <el-form-item label="优惠券" >
          <el-select v-model="form.couponId" placeholder="请选择优惠券">
            <el-option
              v-for="item in couponList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="套餐的价钱" prop="money">
          <el-input v-model="form.money" style="width: 350px" placeholder="请输入套餐的价钱"/>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker clearable
                          v-model="form.startTime"
                          type="datetime"
                          value-format="yyyy-MM-dd hh:mm:ss"
                          placeholder="请选择开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker clearable
                          v-model="form.endTime"
                          type="datetime"
                          value-format="yyyy-MM-dd hh:mm:ss"
                          placeholder="请选择结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="购买须知" prop="notice">
          <el-input v-model="form.notice" style="width: 350px" placeholder="请输入购买须知"/>
        </el-form-item>
        <el-form-item label="最高省多少" prop="maxMoney">
          <el-input v-model="form.maxMoney" style="width: 350px" placeholder="请输入最高省多少"/>
        </el-form-item>
        <el-form-item label="优惠券个数" prop="couponNum">
          <el-input v-model="form.couponNum" style="width: 350px" placeholder="请输入优惠券个数"/>
        </el-form-item>
      </el-form>
      </el-scrollbar>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

    </el-dialog>
  </div>
</template>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<script>
import {
  thailListManage,
  thailGetManage,
  thailDelManage,
  thailAddManage,
  thailUpdateManage, couponSelectListManage
} from '@/api/admin/manage'

export default {
  name: 'Manage',
  data() {
    return {
      //上传的图片字段
      imageUrl: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 优惠券模块-套餐表格数据
      manageList: [],
      //优惠券列表展示
      couponList:[],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        couponId: null,
        name: null,
        image: null,
        status: null,
        type: null,
        money: null,
        startTime: null,
        endTime: null,
        notice: null,
        maxMoney: null,
        couponNum: null,
        isDelete: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: '请输入套餐名称', trigger: 'blur' },
          { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        startTime: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        notice: [
          { required: true, message: '请输入购买须知', trigger: 'blur' }
        ],
        couponId: [
          { required: true, message: '请输入字符', trigger: 'blur' }
        ],
        image: [
          { required: true, message: '请录入图片', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '请输入价格', trigger: 'blur' }
        ],
        maxMoney: [
          { required: true, message: '请输入金额', trigger: 'blur' }
        ],
        couponNum: [
          { required: true, message: '请输入优惠券数量', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.couponSelectList();
  },

  filters: {
    format(value, arg) {
      function dateFormat(date, format) {
        if (typeof date === 'string') {
          var mts = date.match(/(\/Date\((\d+)\)\/)/)
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2])
          }
        }
        date = new Date(date)
        if (!date || date.toUTCString() == 'Invalid Date') {
          return ''
        }
        var map = {
          'M': date.getMonth() + 1, //月份
          'd': date.getDate(), //日
          'h': date.getHours(), //小时
          'm': date.getMinutes(), //分
          's': date.getSeconds(), //秒
          'q': Math.floor((date.getMonth() + 3) / 3), //季度
          'S': date.getMilliseconds() //毫秒
        }
        format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
          var v = map[t]
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v
              v = v.substr(v.length - 2)
            }
            return v
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length)
          }
          return all
        })
        return format
      }

      return dateFormat(value, arg)

    }
  },
  methods: {
    couponSelectList(){
      couponSelectListManage().then(response => {
        console.log(response);
        this.couponList = response.data
      })
    },
    /** 查询优惠券模块-套餐列表 */
    getList() {
      this.loading = true
      thailListManage(this.queryParams).then(response => {
        this.manageList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        couponId: null,
        name: null,
        image: null,
        status: null,
        type: null,
        money: null,
        startTime: null,
        endTime: null,
        notice: null,
        maxMoney: null,
        couponNum: null,
        updateTime: null,
        createTime: null,
        isDelete: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加优惠券模块-套餐'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      thailGetManage(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改优惠券模块-套餐'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            thailUpdateManage(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            thailAddManage(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除优惠券模块-套餐编号为"' + ids + '"的数据项？').then(function() {
        return thailDelManage(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('admin/manage/thali/export', {
        ...this.queryParams
      }, `套餐_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>


